<template>
    <div class="message-list-layout  w-full">
        <div class="message-list-area w-[80%] " v-if="(currentSession?.messages || []).length > 0">
            <div v-for="(item, index) in currentSession?.messages" :key="index"
                class="message-item  flex  items-start p-2"
                :class="item.role === 'user' ? 'user-message' : 'ai-message'">
                <div class="message-content bg-gray-100 p-2 rounded-lg  break-all">
                    <div class="reasoning_content">
                        {{ item.reasoning_content }}
                    </div>
                    <div class="normal_content">

                        <!-- {{ item.content }} -->
                        <MarkdownViewer :content="item.content" />
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="no-message-area w-full  flex justify-center items-center">
            <p class="text-gray-500">欢迎提问!</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useChatStore } from '@/store/chatstore';
import { storeToRefs } from 'pinia';
import MarkdownViewer from '../MarkdownViewer/MarkdownViewer.vue';

// const chatstore = useChatStore()
const { currentSession } = storeToRefs(useChatStore())

// const messageList = chatstore.currentSession?.messages || []
</script>

<style scoped lang="scss">
.no-message-area {
    margin-top: calc(50vh - 160px);
}

.message-list-area {

    margin: 0 auto;

    padding-bottom: 200px;

    .message-item {
        margin-bottom: 10px;

        &.user-message {
            justify-content: flex-end;

        }

        .message-content {
            max-width: 80%;

            .reasoning_content {
                font-size: 14px;
                color: #818181;
                margin-bottom: 16px;
                ;
            }
        }

        &.ai-message {
            justify-content: flex-start;

        }
    }
}
</style>